<template>
  <div class="returnApp">
    <div class="alternateInfo">
      <div class="alternateImage">
        <img src="https://mobuz-mp.cdn.bcebos.com/matter/alternateImage.png">
      </div>
      <div class="alternateHint">支付成功</div>
      <div class="alternateTitle">悦器社集训营</div>
      <div class="alternateFigure">
        <div class="figureSymbol">￥</div>
        <div class="figurePrice">{{figure}}</div>
      </div>
    </div>
    <div class="returnButton">
      返回悦器社APP
      <button class="launchAppButton" open-type="launchApp"  @error="launchAppError"></button> 
    </div>
    <div class="leaveWX" @click.stop.prevent="goToWXIndex">回到小程序首页</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      // 优惠价格
      figure: (0).toFixed(2),
    }
  },
  mounted () {
    let self = this
    // 初始化 返回app界面
    self.initReturnApp()
  },
  methods: {
    // 初始化 返回app界面
    initReturnApp() {
      let self = this
      if (self.$root.$mp.query.amount) {
        const _figure = self.$root.$mp.query.amount
        // 优惠价格
        self.figure =((_figure-0)/100).toFixed(2)
      }
    },
    // 跳转 app 失败
    launchAppError(e) {
      let self = this;
      console.log(e.mp.detail.errMsg)
      if (e.mp.detail.errMsg === 'invalid scene'){
        // showMessager('跳转 app 失败')
        wx.showModal({
          title: '',
          content: '请到应用商店下载最新版本悦器社，如果您已经下载了app，请尝试其他链接跳转（此链接已过期）',
          success(res) {}
        })
      }
    },
    // 返回小程序首页
    goToWXIndex() {
      let self = this;
      wx.redirectTo({ url: '../index/main'})
    },
  }
}
</script>

<style>
  page{
      width: 100%;
      height: 100%;
      background: #ffffff;
  }
</style>

<style lang="less" scoped>
  .returnApp{
    width: 100% !important;
    height: 100% !important;
    .alternateInfo{
      margin-top: 60rpx !important;
      text-align: center !important;
      .alternateImage{
        width: 92rpx !important;
        height: 81rpx !important;
        margin: 0 auto !important;
        img{
          width: 100% !important;
          height: 100% !important;
          display: block !important;
        }
      }
      .alternateHint{
        margin: 0 auto !important;
        margin-top: 17rpx !important;
        width: 128rpx !important;
        height: 45rpx !important;
        line-height: 45rpx !important;
        font-size: 32rpx !important;
        font-family:PingFangSC-Regular !important;
        font-weight:400 !important;
        color:rgba(35,172,57,1) !important;
      }
      .alternateTitle{
        margin: 0 auto !important;
        margin-top: 121rpx !important;
        width: 192rpx !important;
        height: 45rpx !important;
        font-size: 32rpx !important;
        font-family: PingFangSC-Regular !important;
        font-weight: 400 !important;
        color: rgba(51,51,51,1) !important;
        line-height: 45rpx !important;
      }
      .alternateFigure{
        margin: 0 auto !important;
        margin-top: 23rpx !important;
        font-size: 0 !important;
        line-height: 1 !important;
        .figureSymbol{
          display: inline-block !important;
          vertical-align: top !important;
          font-size: 56rpx !important;
          font-family:PingFangSC-Regular !important;
          font-weight: 400 !important;
          color:rgba(51,51,51,1) !important;
          height: 81rpx !important;
        }
        .figurePrice{
          display: inline-block !important;
          vertical-align: top !important;
          // width: 259rpx;
          height: 81rpx !important;
          font-size: 88rpx !important; 
          font-family: WeChatNum-150916test !important;
          font-weight: normal !important;
          color: rgba(51,51,51,1) !important;
          line-height: 87rpx !important;
        }
      }
    }
    .returnButton {
      margin:0 auto !important;
      margin-top: 524rpx !important;
      width: 280rpx !important;
      height: 60rpx !important;
      line-height: 60rpx !important;
      font-family: PingFangSC-Regular !important;
      font-size: 28rpx !important;
      font-weight: 400 !important;
      color: #FFFFFF !important;
      text-align: center !important;
      background-image: linear-gradient(-90deg, #FE7A72 0%, #FFB497 99%) !important;
      border-radius: 30rpx !important;
      position: relative !important;
      .launchAppButton{
        position: absolute !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
      }
    }
    .leaveWX{
      margin: 0 auto !important;
      margin-top: 36rpx !important;
      width: 196rpx !important;
      height: 40rpx !important;
      font-size: 28rpx !important;
      font-family: PingFangSC-Regular !important;
      font-weight: 400 !important;
      color: rgba(51,51,51,1) !important;
      line-height: 40rpx !important;
    }
  }
</style>
